/*  */
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:after,
*:before {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.main {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: white;
    background: linear-gradient(45deg, #ffffff 0%, rgba(187, 147, 252, 0.8) 26%, #94edff 50%);
}

.main {
    overflow: hidden;
}

.bubble {
    background-color: rgba(255, 255, 255, 1);
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
}

.bubble-1 {
    opacity: 0.64;
    left: 27vw;
    top: 45vh;
    animation: move-1 30.02s infinite;
    -moz-transform: translate(0, 0) scale(0.57);
    -ms-transform: translate(0, 0) scale(0.57);
    -webkit-transform: translate(0, 0) scale(0.57);
    transform: translate(0, 0) scale(0.57);
}

.bubble-2 {
    opacity: 0.65;
    left: 71vw;
    top: 6vh;
    animation: move-2 30.04s infinite;
    -moz-transform: translate(0, 0) scale(1.47);
    -ms-transform: translate(0, 0) scale(1.47);
    -webkit-transform: translate(0, 0) scale(1.47);
    transform: translate(0, 0) scale(1.47);
}

.bubble-3 {
    opacity: 0.52;
    left: 72vw;
    top: 20vh;
    animation: move-3 30.06s infinite;
    -moz-transform: translate(0, 0) scale(0.99);
    -ms-transform: translate(0, 0) scale(0.99);
    -webkit-transform: translate(0, 0) scale(0.99);
    transform: translate(0, 0) scale(0.99);
}

.bubble-4 {
    opacity: 0.85;
    left: 94vw;
    top: 84vh;
    animation: move-4 30.08s infinite;
    -moz-transform: translate(0, 0) scale(0.34);
    -ms-transform: translate(0, 0) scale(0.34);
    -webkit-transform: translate(0, 0) scale(0.34);
    transform: translate(0, 0) scale(0.34);
}

.bubble-5 {
    opacity: 0.47;
    left: 55vw;
    top: 45vh;
    animation: move-5 30.1s infinite;
    -moz-transform: translate(0, 0) scale(0.91);
    -ms-transform: translate(0, 0) scale(0.91);
    -webkit-transform: translate(0, 0) scale(0.91);
    transform: translate(0, 0) scale(0.91);
}

.bubble-6 {
    opacity: 0.75;
    left: 76vw;
    top: 45vh;
    animation: move-6 30.12s infinite;
    -moz-transform: translate(0, 0) scale(0.25);
    -ms-transform: translate(0, 0) scale(0.25);
    -webkit-transform: translate(0, 0) scale(0.25);
    transform: translate(0, 0) scale(0.25);
}

.bubble-7 {
    opacity: 0.5;
    left: 51vw;
    top: 57vh;
    animation: move-7 30.14s infinite;
    -moz-transform: translate(0, 0) scale(0.89);
    -ms-transform: translate(0, 0) scale(0.89);
    -webkit-transform: translate(0, 0) scale(0.89);
    transform: translate(0, 0) scale(0.89);
}

.bubble-8 {
    opacity: 0.08;
    left: 6vw;
    top: 31vh;
    animation: move-8 30.16s infinite;
    -moz-transform: translate(0, 0) scale(1.11);
    -ms-transform: translate(0, 0) scale(1.11);
    -webkit-transform: translate(0, 0) scale(1.11);
    transform: translate(0, 0) scale(1.11);
}

.bubble-9 {
    opacity: 0.16;
    left: 95vw;
    top: 43vh;
    animation: move-9 30.18s infinite;
    -moz-transform: translate(0, 0) scale(1.36);
    -ms-transform: translate(0, 0) scale(1.36);
    -webkit-transform: translate(0, 0) scale(1.36);
    transform: translate(0, 0) scale(1.36);
}

.bubble-10 {
    opacity: 0.95;
    left: 11vw;
    top: 97vh;
    animation: move-10 30.2s infinite;
    -moz-transform: translate(0, 0) scale(1.56);
    -ms-transform: translate(0, 0) scale(1.56);
    -webkit-transform: translate(0, 0) scale(1.56);
    transform: translate(0, 0) scale(1.56);
}

.bubble-11 {
    opacity: 0.8;
    left: 86vw;
    top: 43vh;
    animation: move-11 30.22s infinite;
    -moz-transform: translate(0, 0) scale(0.56);
    -ms-transform: translate(0, 0) scale(0.56);
    -webkit-transform: translate(0, 0) scale(0.56);
    transform: translate(0, 0) scale(0.56);
}

.bubble-12 {
    opacity: 0.45;
    left: 22vw;
    top: 3vh;
    animation: move-12 30.24s infinite;
    -moz-transform: translate(0, 0) scale(0.1);
    -ms-transform: translate(0, 0) scale(0.1);
    -webkit-transform: translate(0, 0) scale(0.1);
    transform: translate(0, 0) scale(0.1);
}

.bubble-13 {
    opacity: 0.6;
    left: 93vw;
    top: 34vh;
    animation: move-13 30.26s infinite;
    -moz-transform: translate(0, 0) scale(0.62);
    -ms-transform: translate(0, 0) scale(0.62);
    -webkit-transform: translate(0, 0) scale(0.62);
    transform: translate(0, 0) scale(0.62);
}

.bubble-14 {
    opacity: 0.4;
    left: 73vw;
    top: 25vh;
    animation: move-14 30.28s infinite;
    -moz-transform: translate(0, 0) scale(1.96);
    -ms-transform: translate(0, 0) scale(1.96);
    -webkit-transform: translate(0, 0) scale(1.96);
    transform: translate(0, 0) scale(1.96);
}

.bubble-15 {
    opacity: 0.19;
    left: 20vw;
    top: 89vh;
    animation: move-15 30.3s infinite;
    -moz-transform: translate(0, 0) scale(0.06);
    -ms-transform: translate(0, 0) scale(0.06);
    -webkit-transform: translate(0, 0) scale(0.06);
    transform: translate(0, 0) scale(0.06);
}

.bubble-16 {
    opacity: 0.65;
    left: 98vw;
    top: 74vh;
    animation: move-16 30.32s infinite;
    -moz-transform: translate(0, 0) scale(1.76);
    -ms-transform: translate(0, 0) scale(1.76);
    -webkit-transform: translate(0, 0) scale(1.76);
    transform: translate(0, 0) scale(1.76);
}

.bubble-17 {
    opacity: 0.13;
    left: 46vw;
    top: 48vh;
    animation: move-17 30.34s infinite;
    -moz-transform: translate(0, 0) scale(0.7);
    -ms-transform: translate(0, 0) scale(0.7);
    -webkit-transform: translate(0, 0) scale(0.7);
    transform: translate(0, 0) scale(0.7);
}

.bubble-18 {
    opacity: 0.05;
    left: 85vw;
    top: 61vh;
    animation: move-18 30.36s infinite;
    -moz-transform: translate(0, 0) scale(0.21);
    -ms-transform: translate(0, 0) scale(0.21);
    -webkit-transform: translate(0, 0) scale(0.21);
    transform: translate(0, 0) scale(0.21);
}

.bubble-19 {
    opacity: 0.73;
    left: 55vw;
    top: 67vh;
    animation: move-19 30.38s infinite;
    -moz-transform: translate(0, 0) scale(0.61);
    -ms-transform: translate(0, 0) scale(0.61);
    -webkit-transform: translate(0, 0) scale(0.61);
    transform: translate(0, 0) scale(0.61);
}

.bubble-20 {
    opacity: 0.69;
    left: 37vw;
    top: 97vh;
    animation: move-20 30.4s infinite;
    -moz-transform: translate(0, 0) scale(1.77);
    -ms-transform: translate(0, 0) scale(1.77);
    -webkit-transform: translate(0, 0) scale(1.77);
    transform: translate(0, 0) scale(1.77);
}

.bubble-21 {
    opacity: 0.12;
    left: 62vw;
    top: 40vh;
    animation: move-21 30.42s infinite;
    -moz-transform: translate(0, 0) scale(0.37);
    -ms-transform: translate(0, 0) scale(0.37);
    -webkit-transform: translate(0, 0) scale(0.37);
    transform: translate(0, 0) scale(0.37);
}

.bubble-22 {
    opacity: 0.39;
    left: 7vw;
    top: 12vh;
    animation: move-22 30.44s infinite;
    -moz-transform: translate(0, 0) scale(0.98);
    -ms-transform: translate(0, 0) scale(0.98);
    -webkit-transform: translate(0, 0) scale(0.98);
    transform: translate(0, 0) scale(0.98);
}

.bubble-23 {
    opacity: 0.12;
    left: 35vw;
    top: 12vh;
    animation: move-23 30.46s infinite;
    -moz-transform: translate(0, 0) scale(0.53);
    -ms-transform: translate(0, 0) scale(0.53);
    -webkit-transform: translate(0, 0) scale(0.53);
    transform: translate(0, 0) scale(0.53);
}

.bubble-24 {
    opacity: 0.48;
    left: 11vw;
    top: 64vh;
    animation: move-24 30.48s infinite;
    -moz-transform: translate(0, 0) scale(1.16);
    -ms-transform: translate(0, 0) scale(1.16);
    -webkit-transform: translate(0, 0) scale(1.16);
    transform: translate(0, 0) scale(1.16);
}

.bubble-25 {
    opacity: 0.33;
    left: 78vw;
    top: 93vh;
    animation: move-25 30.5s infinite;
    -moz-transform: translate(0, 0) scale(1.39);
    -ms-transform: translate(0, 0) scale(1.39);
    -webkit-transform: translate(0, 0) scale(1.39);
    transform: translate(0, 0) scale(1.39);
}

.bubble-26 {
    opacity: 0.36;
    left: 85vw;
    top: 52vh;
    animation: move-26 30.52s infinite;
    -moz-transform: translate(0, 0) scale(0.39);
    -ms-transform: translate(0, 0) scale(0.39);
    -webkit-transform: translate(0, 0) scale(0.39);
    transform: translate(0, 0) scale(0.39);
}

.bubble-27 {
    opacity: 0.74;
    left: 65vw;
    top: 27vh;
    animation: move-27 30.54s infinite;
    -moz-transform: translate(0, 0) scale(1.48);
    -ms-transform: translate(0, 0) scale(1.48);
    -webkit-transform: translate(0, 0) scale(1.48);
    transform: translate(0, 0) scale(1.48);
}

.bubble-28 {
    opacity: 0.12;
    left: 11vw;
    top: 31vh;
    animation: move-28 30.56s infinite;
    -moz-transform: translate(0, 0) scale(0.83);
    -ms-transform: translate(0, 0) scale(0.83);
    -webkit-transform: translate(0, 0) scale(0.83);
    transform: translate(0, 0) scale(0.83);
}

.bubble-29 {
    opacity: 0.72;
    left: 73vw;
    top: 16vh;
    animation: move-29 30.58s infinite;
    -moz-transform: translate(0, 0) scale(0.46);
    -ms-transform: translate(0, 0) scale(0.46);
    -webkit-transform: translate(0, 0) scale(0.46);
    transform: translate(0, 0) scale(0.46);
}

.bubble-30 {
    opacity: 0.52;
    left: 57vw;
    top: 99vh;
    animation: move-30 30.6s infinite;
    -moz-transform: translate(0, 0) scale(0.98);
    -ms-transform: translate(0, 0) scale(0.98);
    -webkit-transform: translate(0, 0) scale(0.98);
    transform: translate(0, 0) scale(0.98);
}

.credits {
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 2px 15px;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    z-index: 111;
}

.credits a {
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    letter-spacing: 0.05em;
}

@keyframes move-1 {
    46% {
        -moz-transform: translate(-84vw, -96vh);
        -webkit-transform: translate(-84vw, -96vh);
        transform: translate(-84vw, -96vh);
    }
}

@keyframes move-2 {
    40% {
        -moz-transform: translate(-64vw, 0vh);
        -webkit-transform: translate(-64vw, 0vh);
        transform: translate(-64vw, 0vh);
    }
}

@keyframes move-3 {
    55% {
        -moz-transform: translate(-8vw, -48vh);
        -webkit-transform: translate(-8vw, -48vh);
        transform: translate(-8vw, -48vh);
    }
}

@keyframes move-4 {
    47% {
        -moz-transform: translate(-47vw, 0vh);
        -webkit-transform: translate(-47vw, 0vh);
        transform: translate(-47vw, 0vh);
    }
}

@keyframes move-5 {
    35% {
        -moz-transform: translate(-35vw, -21vh);
        -webkit-transform: translate(-35vw, -21vh);
        transform: translate(-35vw, -21vh);
    }
}

@keyframes move-6 {
    31% {
        -moz-transform: translate(-56vw, -5vh);
        -webkit-transform: translate(-56vw, -5vh);
        transform: translate(-56vw, -5vh);
    }
}

@keyframes move-7 {
    36% {
        -moz-transform: translate(0vw, -85vh);
        -webkit-transform: translate(0vw, -85vh);
        transform: translate(0vw, -85vh);
    }
}

@keyframes move-8 {
    44% {
        -moz-transform: translate(-81vw, -54vh);
        -webkit-transform: translate(-81vw, -54vh);
        transform: translate(-81vw, -54vh);
    }
}

@keyframes move-9 {
    36% {
        -moz-transform: translate(-92vw, -68vh);
        -webkit-transform: translate(-92vw, -68vh);
        transform: translate(-92vw, -68vh);
    }
}

@keyframes move-10 {
    50% {
        -moz-transform: translate(-30vw, -24vh);
        -webkit-transform: translate(-30vw, -24vh);
        transform: translate(-30vw, -24vh);
    }
}

@keyframes move-11 {
    31% {
        -moz-transform: translate(-5vw, -97vh);
        -webkit-transform: translate(-5vw, -97vh);
        transform: translate(-5vw, -97vh);
    }
}

@keyframes move-12 {
    39% {
        -moz-transform: translate(-40vw, -22vh);
        -webkit-transform: translate(-40vw, -22vh);
        transform: translate(-40vw, -22vh);
    }
}

@keyframes move-13 {
    39% {
        -moz-transform: translate(-39vw, -70vh);
        -webkit-transform: translate(-39vw, -70vh);
        transform: translate(-39vw, -70vh);
    }
}

@keyframes move-14 {
    37% {
        -moz-transform: translate(-29vw, -26vh);
        -webkit-transform: translate(-29vw, -26vh);
        transform: translate(-29vw, -26vh);
    }
}

@keyframes move-15 {
    34% {
        -moz-transform: translate(-31vw, -10vh);
        -webkit-transform: translate(-31vw, -10vh);
        transform: translate(-31vw, -10vh);
    }
}

@keyframes move-16 {
    52% {
        -moz-transform: translate(-11vw, -30vh);
        -webkit-transform: translate(-11vw, -30vh);
        transform: translate(-11vw, -30vh);
    }
}

@keyframes move-17 {
    58% {
        -moz-transform: translate(-23vw, -61vh);
        -webkit-transform: translate(-23vw, -61vh);
        transform: translate(-23vw, -61vh);
    }
}

@keyframes move-18 {
    56% {
        -moz-transform: translate(-25vw, -3vh);
        -webkit-transform: translate(-25vw, -3vh);
        transform: translate(-25vw, -3vh);
    }
}

@keyframes move-19 {
    51% {
        -moz-transform: translate(-64vw, -84vh);
        -webkit-transform: translate(-64vw, -84vh);
        transform: translate(-64vw, -84vh);
    }
}

@keyframes move-20 {
    31% {
        -moz-transform: translate(-75vw, -34vh);
        -webkit-transform: translate(-75vw, -34vh);
        transform: translate(-75vw, -34vh);
    }
}

@keyframes move-21 {
    45% {
        -moz-transform: translate(0vw, -99vh);
        -webkit-transform: translate(0vw, -99vh);
        transform: translate(0vw, -99vh);
    }
}

@keyframes move-22 {
    44% {
        -moz-transform: translate(-90vw, -8vh);
        -webkit-transform: translate(-90vw, -8vh);
        transform: translate(-90vw, -8vh);
    }
}

@keyframes move-23 {
    45% {
        -moz-transform: translate(-52vw, -43vh);
        -webkit-transform: translate(-52vw, -43vh);
        transform: translate(-52vw, -43vh);
    }
}

@keyframes move-24 {
    50% {
        -moz-transform: translate(-12vw, -63vh);
        -webkit-transform: translate(-12vw, -63vh);
        transform: translate(-12vw, -63vh);
    }
}

@keyframes move-25 {
    38% {
        -moz-transform: translate(-63vw, -92vh);
        -webkit-transform: translate(-63vw, -92vh);
        transform: translate(-63vw, -92vh);
    }
}

@keyframes move-26 {
    31% {
        -moz-transform: translate(-24vw, -16vh);
        -webkit-transform: translate(-24vw, -16vh);
        transform: translate(-24vw, -16vh);
    }
}

@keyframes move-27 {
    56% {
        -moz-transform: translate(-60vw, -32vh);
        -webkit-transform: translate(-60vw, -32vh);
        transform: translate(-60vw, -32vh);
    }
}

@keyframes move-28 {
    53% {
        -moz-transform: translate(-1vw, -77vh);
        -webkit-transform: translate(-1vw, -77vh);
        transform: translate(-1vw, -77vh);
    }
}

@keyframes move-29 {
    43% {
        -moz-transform: translate(-53vw, -60vh);
        -webkit-transform: translate(-53vw, -60vh);
        transform: translate(-53vw, -60vh);
    }
}

@keyframes move-30 {
    43% {
        -moz-transform: translate(-36vw, -47vh);
        -webkit-transform: translate(-36vw, -47vh);
        transform: translate(-36vw, -47vh);
    }
}